<template>
    <div>
        <h2>点击屏幕会有个球跟着你的鼠标</h2>
        <h3>当前点击坐标: x:{{ point.x }} y:{{ point.y }}</h3>
        <div class="point" :style="{top:point.y-12.5+'px',left:point.x-12.5+'px'}"></div>
    </div>
</template>

<script>
import pointer from '@/hooks/pointer';
export default {
    setup(){
        let point = pointer();

        return{
            point
        }
    }
}
</script>

<style>
.point{
    width: 25px;
    height: 25px;
    border-radius: 12.5px;
    background-color: black;
    position: fixed;
}
</style>